<template>
  <div>
    <!-- 搜索条 -->
      <search-bar></search-bar>
    <!-- 轮播图 -->
    <swiper indicator-dots=true>
      <swiper-item :key='index' v-for='(item, index) in swiperData'>
        <image :src='item.image_src' class="slide-image"></image>
      </swiper-item>
    </swiper>
    <!-- 菜单 -->
    <div class="menu">
      <div :key='index' v-for='(item, index) in menuData' class="menu-item">
        <image :src='item.image_src'></image>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="floor" :key='index' v-for='(item,index) in floorData1'>
      <div class="floor-title">
        <img :src="item.floor_title.image_src">
      </div>
      <div class="floor-content">
        <div class="left">
          <!-- <img :src="item.product_list[0].image_src"> -->
          <img :src="item.leftImagePath">
        </div>
        <div class="right">
          <!-- <img v-if='i>0' :key='i' v-for='(img,i) in item.product_list' :src="img.image_src"> -->
          <img :key='i' v-for='(img,i) in item.product_list' :src="img.image_src">
        </div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <div @click='toTop' class="top" v-show='flag'>
      ︿
      <p>顶部</p>
    </div>
  </div>
</template>
<script>
import request from '../../utils/request.js'
    import SearchBar  from '../../components/searchbar'

export default {
      components:{
        'search-bar':SearchBar
    },
  data () {
    return {
      // 提供轮播图数据
      swiperData: [],
      // 菜单数据
      menuData: [],
      // 商品列表数据
      floorData: [],
      // 控制回到顶部按钮显示隐藏标志位
      flag: false
    }
  },
  computed: {
    floorData1 () {
      // 对原有数据进行加工(把5张图片变成4张)
      return this.floorData.map(item=>{
        // 左侧大图的地址
        item.leftImagePath = item.product_list[0].image_src
        // 右侧图片预留4张
        item.product_list = item.product_list.filter((item,index)=>{
          // 去掉第一张
          return index > 0
        })
        return item;
      })
    }
  },
  methods: {
    toTop () {
      // 控制页面回到顶部
      wx.pageScrollTo({
        scrollTop: 0
      })
    },
    async initData () {
      // 初始化数据
      // 轮播图数据
      let swiperRes = await request('home/swiperdata')
      this.swiperData = swiperRes.data.message
      // 菜单数据
      let menuRes = await request('home/catitems')
      this.menuData = menuRes.data.message
      // 商品列表数据
      let floorRes = await request('home/floordata')
      this.floorData = floorRes.data.message
    }
  },
  created() {

    this.initData()
  },
  onPullDownRefresh () {
    // 下拉刷新时触发，从新获取页面相关后台数据
    this.initData()
  },
  onPageScroll (param) {
    // 页面滚动时触发
    // console.log(param.scrollTop)
    this.flag = param.scrollTop > 50
  }
}
</script>
<style scoped lang='scss'>
  @import './main.scss'
</style>
